<template>
  <div>
    <cube-slide ref="slidelists" :auto-play="false" :data="lists">
      <cube-slide-item v-for="(list, index1) in lists" :key="index1">
        <ul class="traveList">
          <li class="foods" v-for="(item, index2) in list" :key="index2">
            <a>
              <img :src="item.image">
              <div>{{item.text}}</div>
            </a>
          </li>
        </ul>
      </cube-slide-item>
    </cube-slide>
  </div>
</template>
<script>
export default {
  name: 'HomeIcons',
  data() {
    return {
      lists: [
        [
          {
            image: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
            text: '景点门票'
          },
          {
            image:
              'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png',
            text: '北京一日游'
          },
          {
            image: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
            text: '北京必游'
          },
          {
            image: 'http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png',
            text: '溜娃儿'
          },
          {
            image:
              'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/0334cf5430b9b5505fd79e2b8d7e8670.png',
            text: '爬长城'
          },
          {
            image: 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',
            text: '故宫'
          },
          {
            image: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
            text: '动植物园'
          },
          {
            image:
              'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/35d83bb968d80d54926f30cfb92cb6ff.png',
            text: '每周好货'
          }
        ],
        [
          {
            image:
              'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/b4511345827006994aa1980a3886f0ac.png',
            text: '北京世园会'
          },
          {
            image:
              'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png',
            text: '北京欢乐谷'
          }
        ]
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
.traveList {
  width: 100%;
  height: 3.6rem;
  float: left;

  .foods {
    float: left;
    width: 25%;
    height: 1.5rem;
    padding-top: 0.1rem;
    text-align: center;

    a {
      img {
        width: 1.1rem;
        height: 1.1rem;
      }

      div {
        margin-top: 0.1rem;
        color: #212121;
        font-size: 0.28rem;
      }
    }
  }
}
</style>